<template>
	<div class="headerBox">
		<div class="dataBox" @click="tiaozhuan('project')">
			<data-tool title="项目总数" :data="data.projectNum">
				<img src="../../assets/pic/xmzs.png" width="120px" style="margin:  0 auto;" slot="img" />
			</data-tool>
		</div>
		<div class="homeHeaderLine"></div>
		<div class="dataBox" @click="tiaozhuan('project')">
			<data-tool title="在建项目" :data="data.projectIngNum">
				<img src="../../assets/pic/zjxm.png" width="120px" style="margin:  0 auto;" slot="img" />
			</data-tool>
		</div>
		<div class="homeHeaderLine"></div>
		<div class="dataBox" @click="tiaozhuan('ent')">
			<data-tool title="企业总数" :data="data.entNum">
				<img src="../../assets/pic/qyzs.png" width="120px" style="margin:  0 auto;" slot="img" />
			</data-tool>
		</div>
		<div class="homeHeaderLine"></div>
		<div class="dataBox" @click="tiaozhuan('workers')">
			<data-tool title="工人总数" :data="data.workerNum">
				<img src="../../assets/pic/ry.png" width="120px" style="margin:  0 auto;" slot="img" />
			</data-tool>
		</div>
		<div class="homeHeaderLine"></div>
		<div class="dataBox">
			<data-tool title="今日考勤" :data="data.attNum">
				<img src="../../assets/pic/kq.png" width="120px" style="margin:  0 auto;" slot="img" />
			</data-tool>
		</div>
	</div>
</template>

<script>
	import dataTool from './components/dataTool.vue'
	export default {
		components: {
			dataTool
		},
		props: {
			data: {
				type: Object
			}
		},
		methods: {
			tiaozhuan(url) {
				this.$router.push('/' + url + '/list')
			}
		}
	}
</script>

<style scoped>
	.headerBox {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .3);
		width: 100%;
		height: 180px;
		margin-bottom: 20px;
		box-sizing: border-box;
		display: flex;
	}

	.dataBox {
		width: 25%;
		cursor: pointer;
	}


	.homeHeaderLine {
		margin-top: 15px;
		height: 150px;
		border-right: 1px solid #56A7FB;
		border-right: 1px solid;
		border-image: -webkit-linear-gradient(30deg, rgba(255, 255, 255, 0.00) 0%, #56A7FB 50%, rgba(255, 255, 255, 0.00) 99%) 2 2 2 2;
		border-image: -moz-linear-gradient(30deg, rgba(255, 255, 255, 0.00) 0%, #56A7FB 50%, rgba(255, 255, 255, 0.00) 99%) 2 2 2 2;
		border-image: linear-gradient(30deg, rgba(255, 255, 255, 0.00) 0%, #56A7FB 50%, rgba(255, 255, 255, 0.00) 99%) 2 2 2 2;
	}
</style>
